<template>
	<view class="u-page">
		<u-subsection :list="subsection" :current="current"  @change="sectionChange"></u-subsection>
		<view v-for="(item, index) in list" :key="index">
			<u-cell customStyle="background:#fff;" @click="showStore(item)" :isLink="true">
				<view slot="title">
					<text v-if="item.customer_type=='company'">{{item.name}}</text>
					<text v-if="item.customer_type=='family'">{{item.contact}}-{{item.mobile}}</text>
				</view>
				<view slot="label">
					<view style="font-size: 24rpx;color: darkgray;">
					<text v-if="item.customer_type=='company'">{{item.area.mergename}}</text>
					<text v-if="item.customer_type=='family'">{{item.address}}</text>
					</view>
				</view>
				<view slot="value">
					<text v-if="item.status=='normal'" class="tag-info">正常</text>
					<text v-if="item.status=='hidden'" class="tag-danger">禁用</text>
				</view>
			</u-cell>
		</view>
		<u-empty v-if="list.length==0" text="没有客户!" mode="search" marginTop="150"></u-empty>
		<block v-if="checkCustomer">
			<view class="searchbtn checkCustomer" @click="showSearch=true;">
				<u-icon name="search" size="24" color="#fff"></u-icon>
			</view>
		</block>
		<block v-else>
			<view class="plusbtn" @click="goAdd">
				<u-icon name="plus" size="24" color="#fff"></u-icon>
			</view>
			<view class="searchbtn" @click="showSearch=true;">
				<u-icon name="search" size="24" color="#fff"></u-icon>
			</view>
		</block>
		<u-popup :show="showDetail" @close="showDetail=false" mode="center" :round="4" customStyle="width:80%;padding:30rpx 0;">
			<view class="detail">
				<block v-if="detail.customer_type=='company'">
				<block v-if="detail.cover_url">
					<view @click="showPic(detail.cover_url)" class="img" :style="'background:url('+detail.cover_url+')no-repeat;background-size:cover;'"></view>
					<u-button size="small" customStyle="margin-top:4rpx;" text="修改门头照片" @click="uploadPic()" type="primary"></u-button>
				</block>
				<block v-else>
					<view @click="uploadPic()" class="img" :style="'background:url('+uploadhead+')no-repeat;background-size:cover;'"></view>	
				</block>
				</block>
				<view style="margin-top: 20rpx;" class="itx">联系人：{{detail.contact}} - {{detail.mobile}} <text @click="call(detail)" style="white-space: nowrap;margin-left: 6rpx;" class="tag-info">拨打</text></view>
				<view class="itx">地址：{{detail.address}} <text @click="local(detail)" style="white-space: nowrap;margin-left: 6rpx;" class="tag-info">导航</text></view>
				<u-button @click="goGoods(detail.id)" type="success" customStyle="margin-bottom:20rpx;" size="small">设置商品</u-button>
				<u-button @click="goOrder(detail.id)" type="primary" customStyle="margin-bottom:20rpx;" size="small">下单详情</u-button>
				<u-button type="error" size="small" @click="editStore">修改资料</u-button>
			</view>
		</u-popup>
		<u-popup :show="showSearch" @close="showSearch=false" mode="center" :round="4" customStyle="width:80%;padding:20rpx 0;">
			<view class="search">
				<u-input placeholder="请输入客户名称" v-model="keywords"/>
				<u-button type="primary" size="small" @click="search" customStyle="margin-top:20rpx;">查询</u-button>
				<u-button type="warning" size="small" @click="reset" customStyle="margin-top:20rpx;">重置</u-button>
			</view>
		</u-popup>
		<u-tabbar value="store" v-if="!checkCustomer">
			<u-tabbar-item text="客户" name="store" icon="home-fill"></u-tabbar-item>
			<u-tabbar-item text="订单" name="order" icon="file-text-fill" @click="goOrder(0)"></u-tabbar-item>
			<u-tabbar-item text="我的" name="index" icon="account-fill" @click="goIndex"></u-tabbar-item> 
		</u-tabbar>
	</view>
</template>

<script>
	import {baseUrl,methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				subsection:['企业','住户'],
				current:0,
				list:[],
				endData:false,
				page:1,
				showDetail:false,
				detail:'',
				showSearch:false,
				keywords:'',
				uploadhead:'',
				checkCustomer:0
			}
		},
		onPullDownRefresh() {
			this.reset(true);
		},
		onReachBottom(){
			this.pagelist();
		},
		onLoad(e) {
			this.uploadhead=baseUrl+'assets/img/channel/uploadhead.png';
			this.checkCustomer=e.checkCustomer || 0;
		},
		onShow() {
			this.reset();
		},
		methods: {
			...methods,
			goAdd:function(){
				let type=this.current?'family':'company';
				this.$navigateTo('admin/addstore?type='+type);
			},
			sectionChange:function(e){
				this.current=e;
				this.reset();
			},
			uploadPic:function(){
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (e) => {
						let file = e.tempFiles[0].path;
						this.$uploadFile(file, res => {
							this.updatecover(res.fullurl);
						});
					}
				});	
			},
			updatecover:function(url){
				this.$post('admin/customer/updatecover',{id:this.detail.id,url:url}).then(res=>{
					this.detail.cover_url=url;
					this.list=this.list.map(t=>{
						if(t.id==this.detail.id){
							t.cover_url=url;
						}
						return t;
					});
				});
			},
			goIndex:function(){
				this.$redirectTo('admin/index');			
			},
			goOrder:function(e){
				let id=e || '';
				this.$redirectTo('admin/orderlist?customer_id='+id);
			},
			goGoods:function(e){
				let id=e || '';
				this.$navigateTo('admin/goodslist?customer_id='+id);
			},
			showPic:function(url){
				uni.previewImage({
					urls:[url]
				});
			},
			reset:function(pulldown=false){
				this.showSearch=false;
				this.keywords='';
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist(pulldown);		
			},
			search:function(){
				this.showSearch=false;
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist();		
			},
			call:function(detail){
				uni.makePhoneCall({
					phoneNumber:detail.mobile
				});
			},
			local:function(detail){
				uni.openLocation({
					latitude:parseFloat(detail.latitude),
					longitude:parseFloat(detail.longitude),
					fail(e) {
						console.log(e);
					}
				});
			},
			editStore:function(){	
				this.showDetail=false;
				this.$navigateTo('admin/addstore?customer_id='+this.detail.id);
			},
			showStore:function(detail){
				if(this.checkCustomer){
					uni.setStorageSync('setCustomer',detail);
					this.$navigateBack();
					return;
				}
				this.detail=detail;
				this.showDetail=true;
			},
			pagelist:function(pulldown=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get("admin/customer/list",{
					page:this.page,
					keywords:this.keywords,
					type:this.current?'family':'company'
				},true).then(res=>{
					if(pulldown){
						uni.stopPullDownRefresh();
					}
					if(res.length<10){
						this.endData=true;
					}
					this.list=this.list.concat(res);	
					this.page++;	
				});		
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #eeeeee;
	}
	.settle_type{
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}
	.plusbtn{
		position: fixed;
		bottom: 120rpx;
		right: 20rpx;
		background-color: #3f9ad7;
		border-radius: 50%;
		padding: 8rpx;
		z-index: 999;
	}
	.searchbtn{
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		background-color: #3f9ad7;
		border-radius: 50%;
		padding: 8rpx;
		z-index: 999;
	}
	.checkCustomer{
		bottom: 40rpx;
	}
	.detail{
		padding: 20rpx;
		text-align: center;
		.itx{
			font-size: 28rpx;
			text-align: left;
			margin-bottom: 20rpx;
		}
		.itx:last-child{
			margin-bottom: 0rpx;
		}
		.img{
			width: 100%;
			height: 300rpx;
			margin-bottom: 10rpx;
		}
	}
	.search{
		padding: 20rpx;
	}
</style>